<template>
  <div class="app">
    <Header />
    <Counters :counters="counters" />
    <Banner />
    <Section title="我的订单" :items="orderItems" />
    <Section title="我的服务" :items="serviceItems" />
    <Section title="个人中心" :items="personalItems" />
    <BottomNav />
    <!-- 添加占位元素，填充底部空白 -->
    <div class="spacer"></div>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Counters from './components/Counters.vue';
import Banner from './components/Banner.vue';
import Section from './components/Section.vue';
import BottomNav from './components/BottomNav.vue';

export default {
  name: 'App',
  components: {
    Header,
    Counters,
    Banner,
    Section,
    BottomNav
  },
  data() {
    return {
      counters: [
        { label: '浏览历史', value: 0 },
        { label: '收藏', value: 0 },
        { label: '积分', value: 0 },
        { label: '优惠券', value: 1 }
      ],
      orderItems: [
        { icon: 'fas fa-clipboard', label: '待付款', color: '#4CAF50' },
        { icon: 'fas fa-file-alt', label: '待出库', color: '#4CAF50' },
        { icon: 'fas fa-truck', label: '待收货', color: '#4CAF50' },
        { icon: 'fas fa-star', label: '待评价', color: '#4CAF50' },
        { icon: 'fas fa-undo', label: '退货/款', color: '#4CAF50' }
      ],
      serviceItems: [
        { icon: 'fas fa-stethoscope', label: '我的问诊', color: '#F44336' },
        { icon: 'fas fa-prescription', label: '我的处方', color: '#FF6F61' },
        { icon: 'fas fa-pills', label: '用药助手', color: '#4CAF50' },
      ],
      personalItems: [
        { icon: 'fas fa-map-marker-alt', label: '收货地址', color: '#2196F3' },
        { icon: 'fas fa-camera', label: '我的评价', color: '#FF9800' },
        { icon: 'fas fa-shield-alt', label: '我的投诉', color: '#F44336' },
        { icon: 'fas fa-user-md', label: '用药人', color: '#4CAF50' }
      ]
    };
  }
};
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  height: 100%;
}

.app {
  background: linear-gradient(to bottom, #E6F0FA, #FFFFFF);
  min-height: 100vh;
  padding-bottom: -10px; /* 增加底部内边距，配合 BottomNav */
  width: 100%;
  max-width: 375px; /* 适配手机屏幕 */
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px; /* 为整个页面添加圆角 */
  overflow: hidden; /* 确保内容不溢出圆角 */
}

</style>